<!--这其实是提交选课申请-->
<script setup>
import {Check, List, Message, Setting, User} from "@element-plus/icons-vue";
import {createRouter as $router, useRouter} from "vue-router";
import router from "../router/index.js";

</script>

<template>
  <el-aside class="System" width="220px">
    <el-header>学生信息管理系统</el-header>
    
    <el-menu :defalut-openeds="['1','3']">
          <el-scrollbar max-height="600px">
          <el-sub-menu class="sub-menu1"  index="1">
            <template #title>
              <el-icon ><message /></el-icon>
              <el-text>网上选课</el-text>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="router.push({name:'HomeForStu'})">查看选课信息</el-menu-item>
              <el-menu-item index="1-2" @click="router.push({name:'CourseList'})">提交选课申请</el-menu-item>
              <el-menu-item index="1-3" @click="router.push({name:'stu_cmodify'})">修改所选课程</el-menu-item>
              <el-menu-item index="1-4" @click="router.push({name:'course_table'})">课程表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu class="sub-menu2"  index="3">
            <template #title>
              <el-icon><Check /></el-icon>学业成绩
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="router.push({name:'stu_grade'})">查询课程成绩</el-menu-item>
              <el-menu-item index="3-2">学业警示数量</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu class="sub-menu3" index="4">
            <template #title>
              <el-icon><User /></el-icon>个人中心
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="router.push({name:'stu_personal'})">更改个人信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu class="sub-menu4" index="5">
            <template #title>
              <el-icon><Setting /></el-icon>系统设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="router.push({name:'setting'})" >更改主题</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-scrollbar>
        </el-menu>
    
  </el-aside>
</template>

<style >
.System {
  position: fixed;
  top: 100px;
  left: 15px;
  height:85%;
  border-radius: 15px;
  background-color: rgba(170, 207, 231, 0.532);
  font-size: larger;
  .el-header {
    background-color: #abc4e5ae;
    font-weight: 500;
    color: #000000;
    line-height: 60px;
  }
  .sub-menu1{
    background-color: rgb(213, 230, 239);
  }
  .sub-menu2{
    background-color: rgb(213, 230, 239);
  }
  .sub-menu3{
    background-color: rgb(213, 230, 239);
  }
  .sub-menu4{
    background-color: rgb(213, 230, 239);
  }
}
</style>